<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>Sample: Ext.ux.Tabularize (Grid Rowspan/Colspan plugin)</title>
    <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2.1/resources/css/ext-all.css" />
    <script type="text/javascript" src="http://extjs.cachefly.net/ext-2.2.1/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="http://extjs.cachefly.net/ext-2.2.1/ext-all-debug.js"> </script>

    <script type="text/javascript" src="../js/Ext.ux.Tabularize.js"> </script>
    <style>
      .x-grid3-row{
        border-style: none solid none none;        
      }

      .x-grid3-cell-inner{
        border-color: #EDEDED;
        border-style: none none solid solid;
        border-width: 0 0 1px 1px;
        padding: 2px 2px 2px 4px;
        text-align: center;
        overflow:        auto; 
        white-space:  normal;
      }
    </style>
    <script type="text/javascript"><!--
      Ext.BLANK_IMAGE_URL = "http://extjs.cachefly.net/ext-2.2.1/resources/images/default/s.gif";
      Ext.onReady(function(){
        var CS = '__colspan__';
        var RS = '__rowspan__';
        var bogus = 'cell';
        var csdata = 'Column Span';
        var rsdata = 'Row Span';
        var rscsdata = 'Mixed';

        var g = new Ext.grid.GridPanel({
          width: 700,
          height: 300,
          autoScroll: true,
          store: new Ext.data.SimpleStore({
            data: [
              [bogus,bogus,csdata,CS,bogus],
              [csdata,CS,bogus,bogus,rsdata],
              [bogus,bogus,bogus,bogus,RS],
              [bogus,rscsdata,CS,bogus,RS],
              [bogus,RS,CS,bogus,bogus]
            ],
            fields: 'A B C D E'.split(' ') 
          }),
          columns: [
            {header: 'A', dataIndex: 'A'},
            {header: 'B', dataIndex: 'B'},
            {header: 'C', dataIndex: 'C'},
            {header: 'D', dataIndex: 'D'},
            {header: 'E', dataIndex: 'E'}
          ],
          plugins: [new Ext.ux.Tabularize()],
          renderTo: 'gridp'
        });
      });
    // --></script>
  </head>
  <body>
    <h1>Sample: Ext.ux.Tabularize (Grid Rowspan/Colspan plugin)</h1>
    <p>* Just for demo purpose.</p>
    <div id="gridp"></div>
  </body>
</html>













